<template>
	<view class="checker-index">
		<checkerLabel
			:list="list" 
			gap="20" 
			labelPosition="bottom"
			currentBg="orange"
			:isRadius="true"
		></checkerLabel>
		
		<checker
			:list="list1"
			gap="30" 
			currentBg="red"
			shape="circle"
		></checker>
	</view>
</template>

<script setup>
import checkerLabel from './component/checker-label'
import checker from './component/checker'
import { ref } from 'vue'
const list = ref([{
	key: 1,
	value: '¥600'
},{
	key: 2,
	value: '¥900'
},{
	key: 3,
	value: '¥1200'
}]);

const list1 = ref([{
	key: 1,
	value: 'A'
},{
	key: 2,
	value: 'B'
},{
	key: 3,
	value: 'C'
}]);
</script>

<style lang="scss">
.checker-index {
	display: flex;
	box-sizing: border-box;
	padding: 40rpx;
	flex-direction: column;
	gap: 30rpx;
}
</style>